<template>
    <!-- 导航组件 -->
    <!-- 调用vant组件 -->
    <van-nav-bar 
    :title="props.title" 
    left-text="" 
    left-arrow 
    @click-left="router.back()">
            <!-- 根据传递过来的参数决定显示 -->
            <template #right v-if="props.showRight">
                <template v-if="useStore.TOKEN">
                    <!-- 点击跳转到购物车 -->
                    <van-icon @click="router.push('/index/cart')" name="cart-o" size="18" :badge="useStore.userCartNumber"/>
                </template>
                <span class="right-login" v-if="!useStore.TOKEN" @click="router.push('/login')">登录</span>
            </template>
            
        </van-nav-bar>
</template>

<script setup lang="ts">
    import { useUserStore } from '../../store';
    
    let useStore = useUserStore();
    let router = useRouter();

    // 获取传过来的参数
    let props = withDefaults(defineProps<{
		title: string,
		showRight: boolean,
	}>(), {
		showRight: false
	});

</script>

<style  lang="less">
//设置字体 背景 图标 颜色
    :root{
        --van-nav-bar-background: #000000;
        --van-nav-bar-icon-color: white;
        // --van-nav-bar-text-color: white;
        --van-nav-bar-title-text-color:white;
    }
    //右侧样式
    .right-login{
		color: white;
		font-size: 16px;
	}
	.user-btn{
		margin-left: 12px;
	}
</style>